<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>

<html>
<head>
    <title>预约</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="" />
    <meta charset="utf-8"/>

    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- bootstrap-css -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <!--// bootstrap-css -->
    <!-- css -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <!--// css -->
    <!-- font-awesome icons -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
</head>

<body>


<!-- banner -->
<div class="banner jarallax">
    <div class="banner-dot">
        <div class="header-top">
            <div class="container">
                <div class="header-top-left">
                    <p><i class="fa fa-home" aria-hidden="true"></i>西永大道 , 重庆沙坪坝</p>
                </div>
                <div class="header-top-right">
                    <p><i class="fa fa-phone" aria-hidden="true"></i> +114514</p>
                </div>
            </div>
        </div>
        <div class="header">
            <div class="container">
                <div class="header-left">
                    <div class="w3layouts-logo">
                        <h1>

                            <a href="/front/indexs">汽车时代</a>
                        </h1>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>

        <div class="header-right about-top">
            <div class="container">
                <div class="top-nav">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <!--navbar-header-->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="/front/indexs" class="active">首页</a></li>
                                <li><a href="/front/about">关于我们</a></li>
                                <li><a href="/front/gallery">汽修产品</a></li>
                                <li class=""><a href="#" class="dropdown-toggle hvr-bounce-to-bottom" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">预约服务<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="hvr-bounce-to-bottom" href="/front/contact">在线预约</a></li>
                                        <li><a class="hvr-bounce-to-bottom" href="#">上门检修</a></li>
                                    </ul>
                                </li>
                                <li><a href="/front/blog">信息中心</a></li>
                                <li class=""><a href="#" class="dropdown-toggle hvr-bounce-to-bottom" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="hvr-bounce-to-bottom" href="/front/recruitment">精英招聘</a></li>
                                        <li><a class="hvr-bounce-to-bottom" href="/front/CustomerMessage">客户留言</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <div class="clearfix"> </div>
                        </div>
                    </nav>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <div class="wthree-heading">
            <h2>在线预约</h2>
        </div>
    </div>
</div>
<!-- //banner -->
<!-- contact -->
<div class="contact-top">
    <!-- container -->
    <div class="container">
        <!--<div class="map">
        <iframe src="http://map.baidu.com/?newmap=1&s=inf%26uid%3D22681b6e5a0dcde503ff2dcc%26wd%3D%E8%A5%BF%E6%B0%B8%E8%B6%B3%E4%B8%8B%26all%3D1%26c%3D132&from=alamap&tpl=mapdots" allowfullscreen></iframe>
    </div>-->
        <div class="mail-grids">
            <div class="col-md-6 mail-grid-left">
                <h3>地址</h3>
                <h5>重庆沙坪坝</h5>
                <h4>西永大道 </h4>

                <h4>联系人：谭先生</h4>
                </br>
                <h4>联系方式</h4>
                <p>Telephone: 15521389512
                    <span>QQ: 913405314</span>
                    <span>电话：020-5856-1762</span>
                </p>
            </div>
            <div class="col-md-6 contact-form">

                <form id="ajaxForm" name="ajaxForm" method="post"  type="validate" >
                    姓名：<input  type="text" name="resname" placeholder="姓名" required="required" valType="CHINESE" msg="<font color=red>*</font>中文格式不正确" >
                    性别：
                    <input type="radio" name="ressex" value="男" checked="checked" style="width: 50px; height: 20px;" />先生
                    <input type="radio" name="ressex" value="女" style="width: 50px; height: 20px;" />女士
                    </br>
                    </br>

                    车牌：<input type="text" name="resdrand" id="CarNum" placeholder="车牌号" required="required" valType="CARSIGN"  msg="<font color=red>*</font>车牌格式不正确"  > 车&emsp;&emsp;型：
                    <div class="btn-group" role="group">
                        <select name="rescarmodel" id="main_id"  class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 150px;">

                        </select>
                    </div>&emsp;&emsp; 预约时间：
                    <input name="resdate" type="date" required="required" valType="DATE" msg="<font color=red>*</font>日期格式不正确"  /><span class='info' id="appointmentTime" ></span>
                    </br>服务类型：
                    <div class="btn-group" role="group">

                        <select name="serid" id="s_id" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 150px;">

                        </select>
                    </div>
                    </br>
                    </br>
                    电话号码：<input type="text" name="resphone" placeholder="电话号码" required="required" valType="MOBILE" msg="<font color=red>*</font>手机格式不正确">

                        <input type="button" id="btnSubmit" value="发送" style="background-color: #2ebaef;width: 80px;height: 30px;outline: none;border: 0px;color: white"></input>
                </form>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <!-- //container -->
</div>
<!-- //contact -->
<!-- footer -->
<div class="w3-agile-footer">
    <div class="container">
        <div class="footer-grids">
            <div class="col-md-3 footer-grid">
                <div class="footer-grid-heading">
                    <h4>地址</h4>
                </div>
                <div class="footer-grid-info">
                    <p>恒达汽修有限公司
                        <span>地　址：重庆市万州区厦门路602号</span>
                    </p>
                    <p class="phone">电　话：020-5856-1762
                        <span>Email : <a href="mailto:wuhongyacao@outlook.com">wuhongyacao@outlook.com</a></span>
                    </p>
                </div>
            </div>

            <div class="col-md-3 footer-grid">
                <div class="footer-grid-heading">
                    <h4>Follow</h4>
                </div>
                <div class="social">
                    <ul>
                        <li>
                            <a href="#"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-rss"></i></a>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-vk"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="agileits-w3layouts-copyright">
            <p>Copyright &copy; 2018.Company name All rights reserved.Technical support by Takahashi Wuu</p>
        </div>
    </div>
</div>
<!-- //footer -->
<script src="js/jarallax.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript">
    /* init Jarallax */
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>

<script type="text/javascript" src="js/move-top.js"></script>
<script src="http://www.jq22.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.poshytip.js"></script>
<script type="text/javascript" src="js/jq.validate.js"></script>
<script type="text/javascript">
    $(function(e) {

        var vali = new Validators();

        $("#btn").bind("click", vali.subByJs);
        return false;

    });
</script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">


    $(function () {
        $.Validator.ajaxValidate= $("#btnSubmit").click(function () {
            $("#btnSubmit").addClass('disabled').attr('disabled', true);
                flag =  beforeSubmit();
                if(flag){
                    var data1 = $("#ajaxForm").formSerialize();
                    data1= decodeURIComponent(data1,true);
                    $.ajax({
                        url : "/front/contact/add",
                        data : data1,
                        type : "post",
                        cache: false,
                        dataType : "json",
                        success : function(data) {
                            console.log(data);
                            alert(data[0])
                            $("#ajaxForm").clearForm();
                            $("#btnSubmit").attr('disabled', false);
                            location.reload();
                        }
                    });
                }else{
                    $("#btnSubmit").attr('disabled', false);
                    alert("还没有完善信息!");

                }

        });
    })

</script>
<script type="text/javascript">
    $().ready(function(){
        $.ajax({
            url:"/front/service2",
            data:{},
            type: "POST",
            cache: false,
            dataType: "json",
            success:function (data) {
               console.log(data)
                    $("#main_id").empty();
                    $("#main_id").append("<option value='' selected='selected'>---请选择类型---</option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#main_id").append('<option  value=' + data[i].vehid + '>' + data[i].vehname + '</option>');
                    }
                //调用第二个ajax方法
                secondAJAX();
            }
        });
        //第二次ajax，不能同时发送2个，导致线程问题，在第一个后调用此方法
        function secondAJAX(){
            $.ajax({
                url:"/front/service",
                data:{},
                type: "POST",
                cache: false,
                dataType: "json",
                success:function (data) {
                    console.log(data)
                    $("#s_id").empty();
                    $("#s_id").append("<option value='' selected='selected'>---请选择类型---</option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#s_id").append('<option  value=' + data[i].serid + '>' + data[i].sername + '</option>');
                    }
                }
            });
        }


    })
</script>


<script type="text/javascript" src="js/easing.js"></script>
<!-- here stars scrolling icon -->


<!-- //here ends scrolling icon -->
</body>

</html>
